<template>
    <div>
        <usertop :title="msg"/>
        <div class="send_box">
            <div class="jijian">
                <div class="box_icon">
                    <el-button type="primary" circle>寄</el-button>
                </div>
                <div class="content_box">
                    <div class="item">
                        <input type="text" v-model="sendFrom.j_name" placeholder="姓名">
                    </div>
                    <div class="item">
                        <input type="number" v-model="sendFrom.j_num" placeholder="手机号码">
                    </div>
                    <div class="item">
                        <input class="address" type="text" v-model="sendFrom.j_address" placeholder="寄件地址">
                    </div>
                </div>
            </div>
            <div class="shoujian">
                <div class="box_icon">
                    <el-button type="warning" circle>收</el-button>
                </div>
                <div class="content_box">
                    <div class="item">
                        <input type="text" v-model="sendFrom.s_name" placeholder="姓名">
                    </div>
                    <div class="item">
                        <input type="number" v-model="sendFrom.s_num" placeholder="手机号码">
                    </div>
                    <div class="item">
                        <input class="address" type="text" placeholder="收件地址">
                    </div>
                </div>
            </div>
        </div>
        <div class="info">
            <p class="info_tit">物品信息</p>
            <div class="content_box">
                <div class="item">
                    <input class="address" type="text" v-model="sendFrom.info" placeholder="输入信息">
                </div>
            </div>
        </div>
        <div class="foot_btn">
            <span @click="sendMsg()">立即下单</span>
        </div>
    </div>
</template>

<script>
    import usertop from "../../components/userMine/usertop";
    export default {
        name: "send",
        data() {
            return {
                msg: '裹裹寄件',
                sendFrom: {
                    j_num: '',
                    j_name: '',
                    j_address: '',
                    s_num: '',
                    s_name: '',
                    info: ''
                }
            }
        },
        components: { usertop },
        methods: {
            sendMsg() {
                if (this.sendFrom.j_num && this.sendFrom.j_name && this.sendFrom.s_num && this.sendFrom.s_name && this.sendFrom.info) {
                    this.$http.post('/api/sendexp', this.sendFrom)
                        .then(({data}) => {
                            if (data.code == 200) {
                                this.$message({
                                    message: '包裹已寄出～',
                                    type: 'success'
                                })
                                this.$router.push('/index')
                            }
                        })
                } else {
                    this.$message({
                        message: '请补全信息！',
                        type: 'warning'
                    })
                }
            }
        },
        mounted() {
            this.sendFrom.j_name = window.sessionStorage.getItem('uname');
            this.sendFrom.j_num = window.sessionStorage.getItem('phonenum');
            this.sendFrom.j_address = window.sessionStorage.getItem('address');
        }
    }
</script>

<style lang="scss" scoped>
@import "../../style/index/send";
</style>